<template>
  <div>我的</div>
  <p>carmoule数据-子模块数据</p>
  <ul>
    <li v-for="item in carlist" :key="item.id">
      {{ item.proname }} --{{ item.price }}
    </li>
  </ul>
  <!-- getters数据- 子模块 -->
  <ul>
    <li v-for="item in filtercarlist" :key="item.id">
      {{ item.proname }} --{{ item.price }}
    </li>
  </ul>
  <p>
    <button @click="addcarFn">加入购物车-同步</button
    ><button @click="addcarAsyncFn">加入购物车-异步</button>
  </p>
</template>

<script>
//使用 辅助函数映射的方法操作 子模块module
import { mapActions, mapGetters, mapState, mapMutations } from "vuex";
export default {
  name: "",
  data() {
    return {
      num: 0,
      show: true, // 控制显示隐藏
    };
  },
  computed: {
    doublenum() {
      return this.num * 2;
    },
    // 语法: ...mapState("模块名", ["该模块中的数据"]),
    ...mapState("carmodule", ["carlist"]),
    // 语法: ...mapGetters('模块名',['计算属性名'])
    ...mapGetters("carmodule", ["filtercarlist"]),
  },
  methods: {
    ...mapMutations("carmodule", ["addcar"]),
    ...mapActions("carmodule", ["addCarAsync"]),
    addcarFn() {
      // 点击同步加入购物车函数,
      // 调用mutations 中的同步方法 addcar
      this.addcar({
        id: 5,
        proname: "联想电脑",
        price: 5000,
        num: 2,
      });
    },
    addcarAsyncFn() {
      // 调佣actions 中的异步方法
      this.addCarAsync({
        id: 6,
        proname: "戴尔电脑",
        price: 5500,
        num: 2,
      });
    },
  },
  created() {
    console.log("mine-this", this);
  },
};
</script>
<style scoped>
</style>